<template>
  <editor-layout class="qr-panel" @ok="handleOk" v-on="$listeners" v-loading="loading" :loading="saveLoading">
    <el-form size="small" :model="model" :rules="rule" ref="form" @keyup.enter.native="handleOk()" label-width="110px">
      <el-form-item label="收藏时间：">
        <el-date-picker
          v-model="model.date"
          type="date"
          value-format="yyyy.MM.dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <div class="qr-imgs">
        <div class="qr-imgs-item" v-for="item in list" :key="item.id">
          <div class="qr-title"> {{ item.name }}</div>
          <div class="qr-box">
            <vue-qr class="img-cell" preview="1" :preview-text="item.name" :text="getText(item)" :size="200" />
          </div>
        </div>
      </div>
    </el-form>
  </editor-layout>
</template>

<script>
import date from '$ui/utils/date'
import vueQr from 'vue-qr'
import {h5Path} from '@/constant'

export default {
  name: 'upload-panel',
  components: {
    vueQr
  },
  props: {
    list: Array
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      model: {
        date: date(new Date(), 'yyyy.MM.dd')
      },
      rule: {}
    }
  },
  methods: {
    async init() {

    },
    getText(row) {
      const origin = window.location.origin
      const dateStr = this.model.date

      const params = 'id=' + row.id + '&date=' + dateStr
      const text = origin + h5Path + '?' + params
      return text
    },
    handleOk() {
      this.$emit('cancel')
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.qr-panel {
  .ml-10 {
    margin-left: 10px;
  }

  .qr-imgs {
    display: flex;
    flex-wrap: wrap;

    &-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .qr-title {
      text-align: center;
    }
  }
}
</style>
